<?php include '../public/header.php' ?>
<?php include '../public/header_index.php' ?>
<script type="text/javascript" src="/static/admin/echarts/echarts.min.js"></script>
<style>
    .ttt{background-color: #FFFFFF;min-height: 800px;padding: 10px 0;}
    .nei .zuo{float: left;width: calc(100% - 20px);padding-right: 20px}
    .nei .ddbt{font-weight: 700;font-size: 20px;color: #1CA5FF;padding-left: 20px;}
    .nei .xxbt{font-weight: 700;font-size: 16px;padding-bottom: 10px}
    .nei .zuo .xkk{height: 70px;width: calc(16.6% - 22px);margin-left:20px;border: 1px solid #eee;border-radius: 10px;float: left;position: relative}
    .nei .zuo .tu{width: 30px;height: 30px;position: absolute;left: 30px;top: 20px;}
    .nei .zuo .w1{padding-left: 70px;color: #777;margin-top: 12px}
    .nei .zuo .w2{padding-left: 70px;font-size: 20px;font-weight: 700;}
    .nei .zuo .erhbb{margin-top: 20px}
    .nei .zuo .erhxx{margin-top: 20px}
    .nei .zuo .erh{float: left;margin-left: 20px;width: calc(33.33% - 22px);}
    .nei .zuo .eraah{float: left;margin-left: 20px;width: calc(50% - 22px);}
    .nei .zuo .qqtt{border: 1px solid #eee;border-radius: 10px;height: 220px;}
    .nei .zuo .qqttaa{border: 1px solid #eee;border-radius: 10px;height: 280px;}
    .nei .zuo .qtzhan{height: 100px;overflow: hidden;margin-top: 50px;position: relative}
    .nei .zuo .qtzhan div{padding-left: 30px}
    .nei .zuo .qtzhan .kuai{position: relative;top:2px;left:-7px;display: inline-block;width: 15px;height: 15px;}
    .float-l{float: left}
    .wd50{width: 50%}
    .layui-table-tool{display: none}
    .tipss{cursor: pointer;}
</style>
<body class="laytp-container" style="padding: 10px">
<div class="layui-card" id="search-form" style="margin: 0;box-shadow:unset">
    <div class="layui-card-body">
<!--        <form class="layui-form" id="TableSearchFormId" lay-filter="TableSearchForm" onkeydown="keyTableSearch('TableSearchForm', 'datalist')">-->
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-md3">
                        <label class="layui-form-label">年度</label>
                        <div class="layui-input-block">
                            <input type="text" id="year" placeholder="请输入" autocomplete="off" class="layui-input bdate_sea_y">
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <label class="layui-form-label">所属单位</label>
                        <div class="layui-input-block">
                            <div id="chanid" class="xmselect_div">
                                <div class="xmselect_title">请选择</div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item search-div">
                            <div class="layui-form-item layui-inline">
                                <button class="laytp-btn laytp-btn-md laytp-btn-primary" id="listSeaZuo"><i class="layui-icon layui-icon-search"></i>查询</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
<!--        </form>-->
    </div>
</div>
<div class="ttt">
    <div class="nei">
        <div class="zuo">
            <div >
                <div class="xkk">
                    <img class="tu" src="/static/admin/images/entong.png">
                    <div class="w1"><span class="tipss tipss_1">年度项目开票(价税合计)(元)</span></div>
                    <div class="w2 niankaifee">0</div>
                </div>
                <div class="xkk">
                    <img class="tu" src="/static/admin/images/entong.png">
                    <div class="w1"><span class="tipss tipss_2">年度项目销项税(元)</span></div>
                    <div class="w2 niankairatefee">0</div>
                </div>
                <div class="xkk">
                    <img class="tu" src="/static/admin/images/entong.png">
                    <div class="w1"><span class="tipss tipss_3">年度项目收票(元)</span></div>
                    <div class="w2 nianshoufee">0</div>
                </div>
                <div class="xkk">
                    <img class="tu" src="/static/admin/images/entong.png">
                    <div class="w1"><span class="tipss tipss_4">年度进项税-专票(元)</span></div>
                    <div class="w2 nianshouratefee">0</div>
                </div>
                <div class="xkk">
                    <img class="tu" src="/static/admin/images/entong.png">
                    <div class="w1"><span class="tipss tipss_5">年度增值税(元)</span></div>
                    <div class="w2 nianzengfee">0</div>
                </div>
                <div class="xkk">
                    <img class="tu" src="/static/admin/images/entong.png">
                    <div class="w1"><span class="tipss tipss_6">年度预缴税费(元)</span></div>
                    <div class="w2 niantaxfee">0</div>
                </div>
                <div style="clear: both"></div>
            </div>
            <div class="erhxx">
                <div class="eraah">
                    <div class="xxbt"><span class="">年度开收票趋势（按月）</span></div>
                    <div class="qqttaa">
                        <div id="zi_chart_kaishou" style="height: 280px"></div>
                    </div>
                </div>
                <div class="eraah">
                    <div class="xxbt"><span class="">年度开票-回款趋势（按月）</span></div>
                    <div class="qqttaa">
                        <div id="zi_chart_kaihui" style="height: 280px"></div>
                    </div>
                </div>
            </div>
            <div style="clear: both"></div>
            <div class="erhbb">
                <div class="erh">
                    <div class="xxbt">进项票类型</div>
                    <div class="qqtt">
                        <div class="wd50 float-l" id="zi_chart_jxplx" style="height: 220px"></div>
                        <div class="wd50 float-l qtzhan jxplx_list">
                            <div style="font-weight: bold;padding-left: 22px">
                                <span><span class="">收票总额(元):</span></span>
                                <span class="jxplx_zong">0</span>
                            </div>
                            <div>
                                <span class="kuai" style="background-color: #FAC858;"></span>
                                <span class="">专票总额(元):</span>
                                <span class="jxplx_zhuan">0</span>
                            </div>
                            <div>
                                <span class="kuai" style="background-color: #91CC75;"></span>
                                <span class="">普票总额(元):</span>
                                <span class="jxplx_pu">0</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="erh">
                    <div class="xxbt">进项票费用类别</div>
                    <div class="qqtt">
                        <div class="wd50 float-l" id="zi_chart_jxpfylb" style="height: 220px"></div>
                        <div class="wd50 float-l qtzhan jxpfylb_list">
                            <div>
                                <span class="kuai" style="background-color: #73C0DE;"></span>
                                <span><span class="">材料类(元):</span></span>
                                <span class="jxpfylb_cai">0</span>
                            </div>
                            <div>
                                <span class="kuai" style="background-color: #FD7E55;"></span>
                                <span><span class="">人工类(元):</span></span>
                                <span class="jxpfylb_ren">0</span>
                            </div>
                            <div>
                                <span class="kuai" style="background-color: #E87BCA;"></span>
                                <span><span class="">机械设备类(元):</span></span>
                                <span class="jxpfylb_ji">0</span>
                            </div>
                            <div>
                                <span class="kuai" style="background-color: #3BA272;"></span>
                                <span><span class="">专业分包类(元):</span></span>
                                <span class="jxpfylb_fen">0</span>
                            </div>
                            <div>
                                <span class="kuai" style="background-color: #EE6666;"></span>
                                <span><span class="">其他类(元):</span></span>
                                <span class="jxpfylb_qi">0</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div style="clear: both"></div>




        </div>
    </div>
</div>
<script>
    const colors = ['#5470C6', '#FAC858', '#91CC75', '#73C0DE', '#FD7E55', '#E87BCA', '#3BA272', '#EE6666'];

    layui.use(["laytp",'laypage','table','dropdown','form','soulTable'], function () {
        var laypage = layui.laypage, table = layui.table, dropdown = layui.dropdown, form = layui.form, soulTable = layui.soulTable;


        $("#listSeaZuo").click(function () {
            var year = $("#year").val();
            var chanid = $("input[name='chanid']").val();
            func_tong_info(year, chanid);
        });



        func_tong_info();
        function func_tong_info(year='', chanid='') {
            facade.ajax({url: ask_piao_shui_tong_info_tai, data:{year: year, chanid:chanid}}).done(function(res){
                if (res.code === 2000) {
                    var data = res.data;
                    $(".niankaifee").text(parseFormatNum(data.niankaifee));
                    $(".niankairatefee").text(parseFormatNum(data.niankairatefee));
                    $(".nianshoufee").text(parseFormatNum(data.nianshoufee));
                    $(".nianshouratefee").text(parseFormatNum(data.nianshouratefee));
                    $(".nianzengfee").text(parseFormatNum(data.nianzengfee));
                    $(".niantaxfee").text(parseFormatNum(data.niantaxfee));


                    zi_chart_jxplx('zi_chart_jxplx', data.jxplx);
                    $(".jxplx_zong").text(parseFormatNum(data.jxplx.zong));
                    $(".jxplx_zhuan").text(parseFormatNum(data.jxplx.zhuan));
                    $(".jxplx_pu").text(parseFormatNum(data.jxplx.pu));

                    zi_chart_jxpfylb('zi_chart_jxpfylb', data.jxpfylb);
                    $(".jxpfylb_cai").text(parseFormatNum(data.jxpfylb.cai));
                    $(".jxpfylb_ren").text(parseFormatNum(data.jxpfylb.ren));
                    $(".jxpfylb_ji").text(parseFormatNum(data.jxpfylb.ji));
                    $(".jxpfylb_fen").text(parseFormatNum(data.jxpfylb.fen));
                    $(".jxpfylb_qi").text(parseFormatNum(data.jxpfylb.qi));




                    $("#year").val(res.data.is_year);
                    xmselect_dan('chanid', res.data.chanid, res.data.is_chanid)




                    zi_chart_kaishou('zi_chart_kaishou', data.zhu_kai, data.zhu_shou);
                    zi_chart_kaihui('zi_chart_kaihui', data.zhu_kai, data.zhu_hui);




                    render_from();
                }
            });
        }





    });




    $(".tipss_1").hover(function(){hhzhu_index = layer.tips('开票日期在当前年度的销项票的价税合计之和',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_2").hover(function(){hhzhu_index = layer.tips('开票日期在当前年度的销项票的税额之和',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_3").hover(function(){hhzhu_index = layer.tips('开票日期在当前年度的进项票的价税合计之和',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_4").hover(function(){hhzhu_index = layer.tips('开票日期在当前年度的进项票（专票）的税额之和',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_5").hover(function(){hhzhu_index = layer.tips('=（年度项目销项税）-（年度进项税-专票）',this,{time:0});},function(){layer.close(hhzhu_index);});
    $(".tipss_6").hover(function(){hhzhu_index = layer.tips('预缴月份在本年度的预缴金额之和',this,{time:0});},function(){layer.close(hhzhu_index);});





    function zi_chart_kaishou(chat_id, zhu_kai, zhu_shou) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            backgroundColor: '#FFFFFF',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data: ['开票', '收票']
            },
            grid: {
                left: '10%',
                right: '4%',
                bottom: '10%',
                containLabxel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {

                }
            ],
            series: [
                {
                    name: '开票',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + '';
                        }
                    },
                    data: zhu_kai
                },
                {
                    name: '收票',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + '';
                        }
                    },
                    data: zhu_shou
                }
            ]
        };
        mychat.setOption(option);
    }
    function zi_chart_kaihui(chat_id, zhu_kai, zhu_hui) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            backgroundColor: '#FFFFFF',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data: ['开票', '回款']
            },
            grid: {
                left: '10%',
                right: '4%',
                bottom: '10%',
                containLabxel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {

                }
            ],
            series: [
                {
                    name: '开票',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + '';
                        }
                    },
                    data: zhu_kai
                },
                {
                    name: '回款',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + '';
                        }
                    },
                    data: zhu_hui
                }
            ]
        };
        mychat.setOption(option);
    }
    function zi_chart_jxplx(chat_id, data) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            color: [colors[1],colors[2]],
            backgroundColor: '#FFFFFF',
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '80%',
                    data: [
                        {name:'专票总额(元)',value:data.zhuan},
                        {name:'普票总额(元)',value:data.pu},
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        mychat.setOption(option);
    }
    function zi_chart_jxpfylb(chat_id, data) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            color: [colors[3],colors[4],colors[5],colors[6],colors[7]],
            backgroundColor: '#FFFFFF',
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '80%',
                    data: [
                        {name:'材料类(元)',value:data.cai},
                        {name:'人工类(元)',value:data.ren},
                        {name:'机械设备类(元)',value:data.ji},
                        {name:'专业分包类(元)',value:data.fen},
                        {name:'其他类(元)',value:data.qi},
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        mychat.setOption(option);
    }

</script>
</body>
</html>
